<template>
  <div class="box">
    <u-input type="textarea" height="300" placeholder="申诉内容" v-model="appeal.appealContent" :custom-style="inputStyle" />
    <u-upload :header=" { accessToken: storage.getAccessToken() }" :action="action" width="200" @on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
    <div class="submit" @click="appealSubmit">申诉</div>
  </div>
</template>

<script>
import storage from "@/utils/storage.js";
import { upload } from "@/api/common.js";
import { appeal } from "@/api/order.js";
export default {
  data() {
    return {
      storage,
      action: upload,
      inputStyle: {
        background: "#f7f7f7",
        "padding-left": "20rpx",
        "border-radius": "10rpx",
      },
      appeal: {
        appealContent: "",
        appealImages: [],
        orderComplaintId: "",
      },
    };
  },
  onLoad(options) {
    this.routerVal = options;
  },
  methods: {
    // 图片上传
    onUploaded(lists) {
      let images = [];
      lists.forEach((item) => {
        images.push(item.response.result);
      });
      this.appeal.appealImages = images;
    },
    appealSubmit() {
      if (this.appeal.appealContent === "") {
        uni.showToast({
          title: "请输入内容",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      this.appeal.orderComplaintId = this.routerVal.id;
      appeal(this.appeal).then((res) => {
        if (res.data.success) {
          uni.showToast({
            title: "申诉成功",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 500);
        }
      });
      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 32rpx;
}
/deep/ .u-upload {
  justify-content: space-between !important;
  margin: 40rpx 0;
}
</style>